# output.injectStyles

- **Type:** `boolean`
- **Default:** `false`

Whether to inject styles into DOM.

By default, Rsbuild will extract CSS into a separate `.css` file and output it to the dist directory. When this option is set to `true`, CSS files will be inlined into JS files and inserted on the page at runtime via `<style>` tags. This feature is implemented based on [style-loader](https://www.npmjs.com/package/style-loader).

### Example

```ts
export default {
  output: {
    injectStyles: true,
  },
};
```

## Configure style-loader

When `output.injectStyles` is enabled, you can modify the options of `style-loader` through [tools.styleLoader](/config/tools/style-loader).

### Usage Scenario

It is recommended to only enable the `injectStyles` option in development mode.

For production builds, it is recommended to use the default behavior of Rsbuild, which extracts CSS into separate bundles to allow browsers to load CSS and JS assets in parallel.

For example:

```ts
export default {
  output: {
    injectStyles: process.env.NODE_ENV === 'development',
  },
};
```
